<!DOCTYPE html>
<html>
	<head>
		<!-- 后端开发工程，简单的会写，复杂的会看就行了 -->
		<meta charset="utf-8">
		<title>前后端交互</title>
		<!-- 导入jquery的jar包 -->
		<script src="./jquery-3.6.0.min.js"></script>
		<script>
			/* jquery语法：让整个页面加载完成后，在执行js */
			$(function() {
				// ajax的操作
				$.ajax({
					//type: "GET",
					url: "http://localhost:8090/users/findAll",
					dataType: "json",
					contentType: "application/json;charset=utf-8",
					/* data 参数的写法：
					 传递参数  id=100，name=tom,age=18
					 1.对象的方式；
					 语法{key：value，key1：value1}
					 2.拼接字符串的方式（常见的用法）
					 语法：key1=value1&key2=value2
					 */
					data: "id=100&name=tom&age=18", //参数
					/* data: { //拼接的参数
						"skuIds": "102"
					}, */
					success: function(data) {
						//console.log(data)
						//第一种遍历方式
						/* 	for (var i = 0; i < data.length; i++) {
								console.log(data[i]) 
							}
							 */
						/* //原生的js函数
						
						//第二种：in关键字遍历的是下标index
						for(index in data){
							console.log(data[data[index]])
							
						} */
						//第三种;of关键字遍历user对象,用的最多的是这种
						for (user of data) {
							//console.log(user)
							/* 	//获取每行的数据.以前的写法
								let id=user.id;
								let name=user.name;
								let age=user.age;
								let sex=user.sex;
						   */
							//`  ` 叫做模板字符串；取值使用${对象.value}
							//定义变量用let   。常量用const；
							let tr = `
						<tr align='center' > 
						<td>${user.id}</td>
						<td>${user.name}</td>
						<td>${user.age}</td>
						<td>${user.sex}</td>
						<td>
						<input type="button" onclick=""  value="修改" />
						<input type="button" id="bt" value="删除" />
						</td>
						</tr> ` //append将指定的	元素进行追加
							$("#tab1").append(tr)
						}
					},
					error: function(data) {
						alert("获取失败")
					}
				});

				// 写操作方法
				function fn() {

					confirm("nihao")

				};
				// alert("页面加载完成");	
			})
			// 写操作方法
			$("#bt").click(function(){
				confirm("nihao")
			} );
			// alert("页面加载完成");
		</script>
	</head>
	<body>
		<!-- 需要准备一个表格，展现user的数据 -->

		<table id="tab1" border="1px" width="60%" align="center" cellpadding="">
			<tr>
				<td colspan="5">
					<h1 align="center">用户列表</h1>
				</td>
			</tr>
			<tr align="center" height="50px">
				<th>编号</th>
				<th>名称</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
			<!-- 	<tr align="center">
				<td colspan="5">
					<input type="button" onclick="fn();" name="" id="" value="点击获取数据" />
				</td>
			</tr> -->

		</table>

	</body>
</html>
